<template>
	<div ref="workbenchChart1" v-resize="resizeChart" style="width: 100%;height: 100%;"></div>
</template>

<script>
    import * as echarts from 'echarts';
    import { color, borderColor } from './chart-conf';
    import homeMixin from '../../../../mixins/dom-resize';
    import { productionPrdReportPage } from '../../../../api/production/xsReport';
    export default {
        name: 'ProcessYieldChart',
        props: {
            searchParams: {
                type: Object,
                default() {
                    return {
                        workshopId: null,
                        processCode: ''
                    };
                }
            }
        },
        mixins: [homeMixin],
        data() {
            return {
                chartData: [],
                example: null,
                borderColor: '#c5c8ce',
                option: {
                    title: {
                        text: '',
                        textStyle: {
                            fontWeight: 'none'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['产量']
                    },
                    grid: {
                        top: '30px',
                        right: '4%',
                        bottom: '10px',
                        left: '20px',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: [],
                        axisLabel: {
                            show: true,
                            color: color

                        },
                        nameTextStyle: {
                            color: 'red'
                        },
                        axisLine: {
                            lineStyle: {
                                color: borderColor
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: 'none'
                            }
                        },
                        axisLabel: {
                            show: true,
                            color: color

                        },
                        axisLine: {
                            lineStyle: {
                                color: borderColor
                            }
                        }
                    },
                    series: [
                        {
                            name: '产量',
                            type: 'line',
                            data: [],
                            smooth: true,
                            symbol: 'none',
                            itemStyle: {
                                color: 'rgb(255, 70, 131)'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }
                                ])
                            }
                        }
                    ]
                }
            };
        },
        methods: {
            resize() {
                window.addEventListener('resize', () => {
                    this.resizeChart();
                });
            },
            initChart() {
                this.$nextTick(() => {
                    this.example = echarts.init(this.$refs.workbenchChart1);
                    this.example.setOption(this.option);
                });
            },
            updateChart() {
                if (this.example) {
                    this.$nextTick(() => {
                        this.option.xAxis.data = this.chartData.map(x => x.belongDate);
                        this.option.series[0].data = this.chartData.map(x => x.shiftQty);
                        this.example.setOption(this.option);
                    });
                } else {
                    this.initChart();
                }
            },
            getChartDataRequest() {
                return productionPrdReportPage({
                    workshopId: this.searchParams.workshopId,
                    processCode: this.searchParams.processCode,
                    // auditState: 1,
                    belongDate: '',
                    pageSize: 30,
                    pageNo: 1
                }).then(res => {
                    if (res.data.status === 200) {
                        const arr = res.data.res ? res.data.res.reverse() : [];
                        const obj = {};
                        // 同一个日期的累计起来
                        arr.forEach(x => {
                            if (!obj[x.belongDate]) {
                                obj[x.belongDate] = {
                                    belongDate: x.belongDate,
                                    val: x.shiftQty
                                };
                            } else {
                                obj[x.belongDate].val = parseFloat((obj[x.belongDate].val + x.shiftQty).toFixed(2));
                            }
                        });
                        const newArr = [];
                        for (const key in obj) {
                            newArr.push({
                                belongDate: obj[key].belongDate,
                                shiftQty: obj[key].val
                            });
                        }
                        this.chartData = newArr;
                        this.updateChart();
                    }
                });
            }
        },
        mounted() {
            this.resize();
            this.initChart();
        },
        watch: {
            searchParams: {
                handler() {
                    this.getChartDataRequest();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<style scoped lang="scss"></style>
